<template>
  <div class="home">
    <el-container>
      <el-header style="height:50px;">
        <div class="title">优印染生产在线</div>
        <div class="curruser">
          <span>当前用户:&nbsp;{{currUser.userId}}&nbsp;|&nbsp;{{currUser.userName}}</span>
          <a href="#">修改密码</a>
          <a href="#" @click.prevent="logout">退出系统</a>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu v-for="parent in parentList" :key="parent.menuId"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{parent.menuName}}</span>
              </template>
              <el-menu-item  v-for="sub in parent.subMenuList" :key="sub.menuId" :index="`/home${sub.menuUrl}`">{{sub.menuName}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
             <router-view />
          </el-main>
          <el-footer style="height:30px;">版权所有:&copy;xxx软件开发有限公司</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      currUser:{},//当前用户
      parentList:[],//父菜单集合
    };
  },
  methods: {
    handleSelect(key) {
        this.$router.push(key);
      },

      getCurrUser(){
          this.$axios.get('safty/home/curruser')
          .then(response=>{
            this.currUser=response.data;
          })
      },
      logout(){
        this.$axios.delete('safty/home/curruser')
          .then(response=>{
            let result = response.data;
            if (result.success) {
              this.$message.success({
                message: result.message,
                onClose: () => {
                  this.$router.push("/");
                }
              });
            } else {
              this.$message.error(result.message);
            }
          })
      },
      getMenu(){
        
        this.$axios.get('safty/home/menu')
        .then(response=>{
          
          this.parentList=response.data;
        })
        
      }
  },
  mounted() {
    this.getCurrUser();
    this.getMenu();
  }
};
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-header {
  background-color: #303133;
  padding-left: 2px;

  position: relative;
}
.el-footer {
  background-color: #303133;
  color: #ffffff;
  font-size: 13px;
  line-height: 30px;
}
.el-aside {
  background-color: #565758;
}
.el-main {
  /* background-color: #f8d77c; */
  /* width: 100%; */
  background-color:white;
  padding:10px 5px 5px 5px;
}
.title {
  color: #cccccc;
  text-align: left;
  font-size: 24px;
  line-height: 50px;
}
.curruser {
  position: absolute;
  color: #cccccc;
  bottom: 2px;
  right: 5px;
}
.curruser > * {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
}
.curruser > a:link,
.curruser > a:visited {
  color: #f0f881;
  text-decoration: none;
}
.curruser > a:hover {
  color: white;
  font-weight: bold;
}
</style>>
